<template>
  <div>
    <el-form ref="triggerForm" :model="formTriggerData" :rules="triggerRule" size="medium"
             label-width="100px">
      <el-form-item label="执行账户" prop="accountType">
        <el-radio-group v-model="formTriggerData.accountType" size="small">
          <el-radio v-for="(item, index) in accountOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上涨幅度" prop="upRate">
        <el-radio-group v-model="formTriggerData.upRate" size="small" @change="changeUpRate">
          <el-radio v-for="(item, index) in upRateOptions" :key="index" :label="item.value"
                    :disabled="item.disabled" border>{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="下跌幅度" prop="downRate">
        <el-radio-group v-model="formTriggerData.downRate" size="small" @change="changeDownRate">
          <el-radio v-for="(item, index) in downRateOptions" :key="index" :label="item.value"
                    :disabled="item.disabled" border>{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="当前价" prop="currentPrice">
        <el-input v-model="formTriggerData.currentPrice" clearable disabled
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="触发价" prop="triggerPrice">
        <el-input v-model="formTriggerData.triggerPrice" placeholder="请输入触发价" clearable
                  :style="{width: '50%'}"></el-input>
        当价格{{ formTriggerData.triggerPrice > formTriggerData.currentPrice ? '大于' : '小于' }}{{
          formTriggerData.orderPrice
        }}时触发
      </el-form-item>
      <el-form-item label="委托价" prop="orderPrice">
        <el-input v-model="formTriggerData.orderPrice" placeholder="请输入委托价" clearable
                  :style="{width: '50%'}"></el-input>

      </el-form-item>
      <el-form-item label="委托数量" prop="orderMount">
        <el-input v-model="formTriggerData.orderMount" placeholder="请输入委托数量" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitFormtriggerForm">提交</el-button>
        <el-button @click="resetFormtriggerForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="primary" @click="freshA">全部激活</el-button>
      <el-button type="warning" @click="closeA">全部关闭</el-button>
      <el-button type="success" @click="activeA">全部刷新</el-button>
      <el-button  @click="queryAll">重新查询</el-button>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="250">
      <el-table-column
        fixed
        prop="createDate"
        label="日期">
      </el-table-column>
      <el-table-column
        prop="platform"
        label="交易所">
        <template slot-scope="scope">
          {{
            scope.row.platform == 'mxc' ? '抹茶' : scope.row.platform == 'hoo' ? '虎符' : scope.row.platform == 'wbfex' ? '瓦特' : scope.row.platform == 'tcex' ? 'DBank' : '其它'
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="accountType"
        label="账户类型">
        <template slot-scope="scope">
          {{ scope.row.accountType == 'depth' ? '深度账户' : scope.row.accountType == 'kline' ? 'k线账户' : '其它' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="active"
        label="计划单类型">
        <template slot-scope="scope">
          {{ scope.row.active == 'up' ? '高价格打压' : scope.row.platform == 'down' ? '低价格托底' : '其它' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="upRate"
        label="计划单比例">
        <template slot-scope="scope">
          {{ scope.row.active == 'up' ? scope.row.upRate : scope.row.downRate }} %
        </template>
      </el-table-column>
      <el-table-column
        prop="triggerPrice"
        label="出发价格">
      </el-table-column>
      <el-table-column
        prop="orderPrice"
        label="订单价格">
      </el-table-column>
      <el-table-column
        prop="currentPrice"
        label="瞬时现价">
      </el-table-column>
      <el-table-column
        prop="orderMount"
        label="筹码数量">
      </el-table-column>
      <el-table-column
        prop="triggerState"
        label="计划状态">
        <template slot-scope="scope">
          <span>
          {{
              scope.row.triggerState == 'activity' ? '已激活' : scope.row.triggerState == 'triggered' ? '已触发' : scope.row.triggerState == 'closed' ? '关闭' : '其它'
            }}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="fresh(scope.row.id)"
            type="text"
            size="small">
            刷新
          </el-button>
          <el-button
            @click.native.prevent="close(scope.row.id)"
            type="text"
            size="small">
            关闭
          </el-button>
          <el-button
            @click.native.prevent="active(scope.row.id)"
            type="text"
            size="small">
            激活
          </el-button>
          <el-button
            @click.native.prevent="del(scope.row.id)"
            type="text"
            size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  editOrSaveList
}
  from "@/api/platform/mapping";
import {
  getTicker,
  createTrigger,
  listTrigger,
  closeTrigger,
  freshTrigger,
  activeTrigger,
  freshAll,
  closeAll,
  activeAll,
  deleteTrigger
} from "@/api/platform/running";


export default {
  components: {},
  props: {
    platform: null,
    runningId: undefined
  },
  data() {
    return {
      tableData: [],
      editableTabsValue: '1',
      formTriggerData: {
        accountType: 'depth',
        platform: this.platform,
        runningId: this.runningId,
        upRate: '',
        downRate: '',
        active: '',
        triggerPrice: undefined,
        orderPrice: undefined,
        orderMount: undefined,
        currentPrice: undefined,
        triggerState: 'activity'
      },
      triggerRule: {
        accountType: [{
          required: true,
          message: '账户类型不能为空',
          trigger: 'change'
        }],
        triggerPrice: [{
          required: true,
          message: '请输入触发价',
          trigger: 'blur'
        }],
        orderPrice: [{
          required: true,
          message: '请输入委托价',
          trigger: 'blur'
        }],
        orderMount: [{
          required: true,
          message: '请输入委托数量',
          trigger: 'blur'
        }],
      },
      upRateOptions: [{
        "label": "3%",
        "value": 3
      }, {
        "label": "4%",
        "value": 4
      }, {
        "label": "5%",
        "value": 5
      }, {
        "label": "10%",
        "value": 10
      }, {
        "label": "20%",
        "value": 20
      }, {
        "label": "30%",
        "value": 30
      }, {
        "label": "40%",
        "value": 40
      }, {
        "label": "50%",
        "value": 50
      }],
      accountOptions: [{
        "label": "深度账户",
        "value": 'depth'
      }, {
        "label": "K线账户",
        "value": 'kline'
      }],
      downRateOptions: [{
        "label": "3%",
        "value": 3
      }, {
        "label": "4%",
        "value": 4
      }, {
        "label": "5%",
        "value": 5
      }, {
        "label": "10%",
        "value": 10
      }, {
        "label": "20%",
        "value": 20
      }, {
        "label": "30%",
        "value": 30
      }, {
        "label": "40%",
        "value": 40
      }, {
        "label": "50%",
        "value": 50
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTick();
  },
  mounted() {
    this.getTick();
    this.listAll()
  },
  methods: {
    changeUpRate(value) {
      console.log(value)
      this.formTriggerData.active = 'up';
      if (!this.formTriggerData.currentPrice) this.getTick()
      this.formTriggerData.triggerPrice = this.towNumber((100 + value) * this.towNumber(this.formTriggerData.currentPrice) / 100)
      this.formTriggerData.orderPrice = this.formTriggerData.triggerPrice
    },

    changeDownRate(value) {
      console.log(value)
      this.formTriggerData.active = 'down';
      if (!this.formTriggerData.currentPrice) this.getTick()
      this.formTriggerData.triggerPrice = this.towNumber((100 - value) * this.towNumber(this.formTriggerData.currentPrice) / 100)
      this.formTriggerData.orderPrice = this.formTriggerData.triggerPrice
    },

    towNumber(val) {
      return Number(Number(val).toFixed(5))
    },

    submitFormtriggerForm() {
      this.$refs['triggerForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        createTrigger(this.runningId, this.formTriggerData).then(res => {
          this.listAll()
        })
      })
    },
    resetFormtriggerForm() {
      this.$refs['triggerForm'].resetFields()
    },

    getTick() {
      getTicker(this.runningId, {platform: this.platform}).then(res => {
        this.formTriggerData.currentPrice = res.data.price
      })
    },

    listAll() {
      listTrigger(this.runningId).then(res => {
        this.tableData = res.data
      })
    }
    ,
    closeA() {
      closeAll(this.runningId).then(res => {
        this.listAll()
      })
    },
    close(id) {
      closeTrigger(this.runningId, {id: id}).then(res => {
        this.listAll()
      })
    },

    queryAll(){this.listAll()},
    activeA() {
      activeAll(this.runningId).then(res => {
        this.listAll()
      })
    },
    active(id) {
      activeTrigger(this.runningId, {id: id}).then(res => {
        this.listAll()
      })
    },
    freshA() {
      freshAll(this.runningId).then(res => {
        this.listAll()
      })
    },
    fresh(id) {
      freshTrigger(this.runningId, {id: id}).then(res => {
        this.listAll()
      })
    },
    del(id) {
      deleteTrigger(this.runningId, {id: id}).then(res => {
        this.listAll()
      })
    }


  }
}

</script>
<style>
</style>
